$io-green: #68ac3b;
$io-blue: darken(#00ACEC, 10%); // 0, 172, 236
$io-gold: #ffd700;
$io-red: #AC3B3B;


blockquote {
  .http {
    margin: $main-padding - 8px;
    padding: 8px;
    background: rgba(255, 255, 255, 0.1);


    .method-get, .method-post, .method-put, .method-delete {
      color: white;
      font-size: 14px;
      font-weight: bold;
      display: inline-block;
      padding: 4px 8px;
      text-transform: uppercase;
    }

    .method-get { background: $io-green; }
    .method-post { background: $io-blue; }
    .method-put { background: $io-gold; }
    .method-delete { background: $io-red; }

    .path {
      display: inline-block;
      margin-left: 12px;
      font-size: 14px;
    }
  }
}

.error-message-sample {
  background: rgba(0, 0, 0, .05);
  font-family: monospace;
}

.toc-wrapper {
  li.on-screen {
    .toc-h1.toc-link {
      background: lighten(#2E3336, 10%);
    }

    .toc-list-h2 {
      background: lighten(#1E2224, 10%);
    }
  }


  .toc-h1.toc-link {
    .menu-arrow {
      padding: 5px 0;
      margin-right: -6px;
      float: right;
      display: inline-block;
      width: 18px;
      height: 18px;

      display: flex;
      justify-content: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      -webkit-box-align: center;
      align-items: center;

      svg {
        display: block;
        fill: #cccccc;
      }
    }

    i {
      margin-left: 10px;
    }

    &.active, &.active-parent {
      .menu-arrow {
        svg {
          // NOTE: do not animate, it's ugly
          transform: rotateZ(90deg);
        }
      }
    }
  }
}
